<template>
    <section>
      <h2>map-actions</h2>
      <fieldset>
        <legend>增加学生</legend>
        <div>姓名：<input type="text" v-model="formData.name" /></div>
        <div>年龄：<input type="number" v-model.number="formData.age" /></div>
        <div>
          性别： 男<input
            type="radio"
            value="男"
            name="sex"
            v-model="formData.sex"
          />
          女<input type="radio" value="女" name="sex" v-model="formData.sex" />
        </div>
        <button @click="dispatchStu(this.formData)">添加</button>
      </fieldset>
      <h3>学生列表</h3>
      <ol>
          <li v-for="item in $store.state.stus" :key="item.name">{{item.name}} {{item.age}}</li>
      </ol>
    </section>
  </template>
  
  <script>

    import {mapActions} from "vuex";

  export default {
      data() {
          return {
              formData: {
  
              }
          }
      },
      methods: {
        ...mapActions(["dispatchStu"]),  // {dispatchStu(payload): {this.$store.dispatch('dispatchStu',payload)}}
      }
  };



  </script>
  
  <style>
  </style>